<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="1 days" name="revisit-after" /> 
    <meta content="" name="keywords" /> 
    <meta content="" name="description" /> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 
    <meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
    <meta content="telephone=no" name="format-detection" /> 
    <meta content="false" id="twcClient" name="twcClient" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="css/style.css" />
    <link id="css" rel="stylesheet" href="css/style1.css" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/Datamodel.js"></script>
     <script src="js/catUtil.js"></script>
    <script src="js/index.js"></script>
    <script src="js/turnover.js"></script>
    <script src="js/indexdata.js"></script>
    <script src="js/accountAll.js"></script>
    <script src="js/report.js"></script>
    <script src="js/accountDetail.js"></script>
    <script type="text/javascript">
        //读取localStorage进行页面风格选择
        styleChange();
    $(document).ready(function(){
        InitIndex();
    });
    </script>
	<title>首页</title>
</head>

<body>
    <div id="nav" class="nav">
        <ul>
            <li data-trigger="nav" data-nav="index" class="on"><a href="javascript:;"><span>首页</span></a></li>
            <li data-trigger="nav" data-nav="turnoverList" ><a href="javascript:;"><span>流水</span></a></li>
            <li data-trigger="nav" data-nav="account" ><a href="javascript:;"><span>账户</span></a></li>
            <li data-trigger="nav" data-nav="report" ><a href="javascript:;"><span>报表</span></a></li>
            <li class="change" id="changeStyle"><a href="#" id=""></a></li>
        </ul>
        <div class="change-style" id="changeStyleContent">
            换个风格吧： 
            <a href="#" data-value="1" class="style style1 on"></a>
            <a href="#" data-value="2" class="style style2"></a>
            <a href="#" data-value="3" class="style style3"></a>
            <a href="#" data-value="4" class="style style4"></a> 
        </div>
    </div>

    <div class="wrapper">
        <!-- 首页 -->
        <div id="index" style="-webkit-transform: translate(0, 0); position: static" class="page">
            <div class="sum">
                <h1><span id="currmonth"></span>月</h1>
                <div id="space"></div>
                <ul class="fs-16">
                    <li>收入:<br />
                    ￥<span id="monthincome"></span></li>
                    <li>支出:<br />
                    ￥<span id="monthoutgo"></span></li>
                    <li>收支差额:<br />
                    ￥<span id="monthincrease"></span></li>
                </ul>
            </div>
            <div id="space"></div>
            <div class="add">
                <ul>
                    <li>
                        <a href="addTurnover.html?addIncome&0"><img alt="新增收入" src="images/add-icon_01.png" /><br/>
                        新增收入</a>
                    </li>
                    <li>
                        <a href="addTurnover.html?addPay&1"><img alt="新增支出" src="images/add-icon_02.png" /><br/>
                        新增支出</a>
                    </li>
                    <li>
                        <a href="addTurnover.html?addTransfer&2"><img alt="新增转账" src="images/add-icon_03.png" /><br/>
                        新增转账</a>
                    </li>
                </ul>
            </div>  
            <div id="space"></div> 
            <div class="total">
                <ul class="fs-16">
                    <li>总资产:<br />
                    ￥<span id="asset"></span></li>
                    <li>负资产:<br />
                    ￥<span id="debt"></span></li>
                    <li>净资产:<br />
                    ￥<span id="realasset"></span></li>
                </ul>
            </div>
            <div class="accountlist" >
                <ul id="accountlistindex">
                    
                    <li class="list2" data-value="card">
                        <a href="javascript:;">
                            <div class="left"><span class="accoutname">银行卡</span></div>
                            <div class="right">
                                <span class="money">￥75000.00</span>
                                <span class="arrow"></span>
                            </div>
                        </a>
                    </li>
                    <li class="list3" data-value="creditcard">
                        <a href="javascript:;">
                            <div class="left"><span class="accoutname">信用卡</span></div>
                            <div class="right">
                                <span class="money">￥2500.00</span>
                                <span class="arrow"></span>
                            </div>
                        </a>
                    </li>
                    <li class="list4" data-value="alipay">
                        <a href="javascript:;">
                            <div class="left">
                                <span class="accoutname">支付宝</span></div>
                            <div class="right">
                                <span class="money">￥1500.00</span>
                                <span class="arrow"></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /首页 -->
        
        <!-- 流水 -->
        <div id="turnoverList" style="-webkit-transform: translate(100%, 0);"  class="page">
        </div>
        <!-- /流水 -->
        
        <!-- 帐户 -->
        <div id="account"  style="-webkit-transform: translate(200%, 0);" class="page">
            <div class="total">
                <ul>
                    <li>总资产:<br />
                    ￥<span id="assetaccount"></span></li>
                    <li>负资产:<br />
                    ￥<span id="debtaccount"></span></li>
                    <li>净资产:<br />
                    ￥<span id="realassetaccount"></span></li>
                </ul>
            </div>
            <div class="accountlist">
                <ul id="accountlistaccount">
                    
                </ul>
            </div>
            <div class="line"></div>
            
            <div style="padding: 15px;">
                <input type="button" id="addAccount" class="sbutton" value="新增账户" />
            </div>
            <div class="addaccount" id="addAccountContent" style="display:none;">
                <form>
                    <ul class="form-list">
                        <li>
                            <label>账户名称:</label> 
                            <input type="text" class="ipt" name="money" id="addAccountName"/>
                        </li>
                        <li>
                            <label>账户金额:</label> 
                            <input type="text" class="ipt"  name="money" id="addAccountMoney"/><br />
                        </li>
                        <li>
                            <input type="button" class="button" onclick="addAccount()" value="保存" />
                            <input type="button" class="button" id="cancel" value="取消" />
                        </li>
                  </ul>
                </form>
            </div>
        </div>
        <!-- /帐户 -->
        
        <!-- 帐户详情 -->
        <div id="sort" style="-webkit-transform: translate(300%, 0);" class="page">
            <div class="sort">
                <a href="#" id="editAccount">
                    <ul class="bg">
                        <li style="font-size: 20px; float:left;" id="accountdetailname">现金</li>
                        <li style="float: right;">￥<span id="accountdetailmoney">3500.00</span></li>
                    </ul>
                </a> 

                <ul class="form-list" id="editAccountContent" style="padding-top: 20px; display:none; ">
                         <li>
                            <label>修改名称:</label> 
                            <input type="text" class="ipt" name="money" id="modifyAccountName"/>
                        </li>
                        <li>
                            <label>修改金额:</label> 
                            <input type="text" class="ipt" name="money" id="modifyAccountMoney"/>
                        </li>
                        <span id="AccountDetailid" data-id=""></span>
                        
                        <li>
                            <input type="button" class="button" onclick="modifyAccount()" value="保存" />
                            <input type="button" class="button" id="editCancel" value="取消" />
                        </li>
                  </ul>

            </div>
            <div id="accountDetailList">
        </div>
        </div>
        <!-- /帐户详情 -->
        
        <div id="report"  style="-webkit-transform: translate(400%, 0);" class="page">
            
            <div class="category category-ex">
                <ul id="reportList">
                </ul>
            </div>

        </div>
    </div>



<script type="text/javascript">







//帐户里页面切换
$('.accountlist').delegate('li', 'click', function(attribute){
    var self = this;
    togglePage('sort', $('#nav li:nth(2)'), function () {
        console.log('id: ' + this.id);
        console.log('data-value: ' + self.getAttribute('data-value'));

        InitAccountDetail(self.getAttribute('data-value'));
        //这里是点击切换页面时候的回调函数，
        //可进行页面预先数据渲染
        //this是对要切换到的页面的dom节点引用，
        //可直接this.innerHTML = 'xxx'，进行页面更新
        //data-value是帐户点进去时带进去的参数，标识页面是“现金”或“银行卡”等等
    });
});

/*
 $('#editAccount, #editCancel').on('click', function () {
     $('#editAccountContent').slideToggle('normal');
 });
 */


//导航切换页面
$('#nav').delegate('li[data-trigger=nav]', 'click', function(){
    togglePage(this.getAttribute('data-nav'), this, function () {
        console.log('id: ' + this.id);

        if(this.id == "turnoverList")
        {
            InitTurnover();
            //excute
            toggleSubtree();
            toggleSubtree({
                triggers: 'span[data-trigger=trigger]',
                categorys: '.fold',
                trigger: '.openCategory',
                iconPlus: 'arrow',
                iconMinus: 'arrow-down',
                cancel: '.cancel'
            });
        } else if(this.id == "index")
        {
            InitIndex();
        } else if(this.id == "account")
        {
            InitAccountAll();
        } else if(this.id == "report")
        {
            InitReport();
        }
        
        var id = this.id;
        $('#report').unbind().bind('webkitTransitionEnd', function() {
            if (id === 'report') {
               InitPercent();
            } else {
                $('#report .process').width('0%');
            }
        });

        //这里是点击切换页面时候的回调函数，
        //可进行页面预先数据渲染
        //this是对要切换到的页面的dom节点引用，
        //可直接this.innerHTML = 'xxx'，进行页面更新
    });
});

//取消按钮收起表单
$('#addAccount, #cancel').on('click', function(){debugger;
    $('#addAccountContent').slideToggle('normal');
});

$('#editAccount, #editCancel').on('click', function () {
    $('#editAccountContent').slideToggle('normal');
    $('#arrowIcon').toggleClass('icon-arrow-down');
});


//样式表切换
$('#changeStyle').on('click', function(e){
    e.preventDefault();
    $('#changeStyle').toggleClass('change-down');
    $('#changeStyleContent').toggleClass('change-style-down');
});
var itv;
$('#changeStyleContent').delegate('.style', 'click', function(e){
    e.preventDefault();
    localStorage.css = this.getAttribute('data-value');
    setStyleOn(styleChange());

    clearTimeout(itv);
    itv = setTimeout(function() {
        $('#changeStyleContent').toggleClass('change-style-down');
        $('#changeStyle').toggleClass('change-down');
    }, 200);
});

setStyleOn(parseInt(localStorage.css, 10) || 1);


</script>
</body>
</html>